<template>
	<view class="notice-part-search-container" @tap="goSearch">
		点击输入关键词搜索
	</view>
	<view class="notice-part-container" :style="{'height':bodyHeight+'px'}">
		
		<view class="notice-part-left">
			<view class="notice-part-left-item" :class="data.currentIndex==index?'notice-part-left-item-active':''" 
				v-for="(item,index) in data.category" :key="index"
				@tap="changeIndex(index)">
				{{item}}
			</view>
		</view>
		<view class="notice-part-right">
			<view class="notice-part-right-item-container">
				<view class="notice-part-right-item"
					v-for="(item,index) in data.notice.noticeList" :key="index"
					@tap="goDetail(item.link_url)">
					<view style="width: 390rpx;">
						<view class="notice-part-right-item-title" :class="((new Date(item.deadline) - new Date())/1000/60/60/24) <=2?'red':''">{{item.title}}</view>
						<view class="notice-part-right-item-label-container" v-if="item.label">
							<view class="notice-part-right-item-label"
								v-for="(label,lindex) in item.label.split(',')" :key="lindex">
								{{label}}
							</view>
						</view>
						<view class="notice-part-right-publisher-posttime">
							<view class="notice-part-right-item-publisher">{{item.publisher}}</view>
							<view class="notice-part-right-item-posttime">{{item.posttime}}</view>
						</view>
						<view class="notice-part-right-item-deadline" v-if="item.deadline" :class="((new Date(item.deadline) - new Date())/1000/60/60/24) <=2?'red':''">
							【截止日期】{{item.deadline}}
						</view>
					</view>
					<view class="notice-part-add-calendar" style="display: flex;align-items: center;" @tap.prevent="addToCalendar(index)" >
						<view class="">
							<view style="line-height: 40rpx;">加入日历提醒</view>
						</view>
					</view>	
				</view>
			</view>
			<view class="notice-part-right-bottom-mention" v-if="data.notice.isAll">
				已经到底啦~
			</view>
			
		</view>
	</view>
</template>

<script>
	import {reactive, onMounted} from 'vue'
	import global from '../../config/global.js'
	export default {
		name:"notice-part",
		setup(){
			let data = reactive({
				category:['事务提醒通知','百宝箱','本科生交流','竞赛通知','科创通知','活动实习通知','就业招聘通知'],
				currentIndex:0,
				notice:{
					pageNum:1,
					total:0,
					isAll:false,
					noticeList:[]
				}
				
			})
			
			let bodyHeight = uni.getSystemInfoSync()['windowHeight']-uni.upx2px(100);
			
			onMounted(()=>{
				getData(data.currentIndex,1)
			})
			
			function changeIndex(i){
				data.currentIndex = i;
				data.notice = {
					pageNum:1,
					total:0,
					isAll:false,
					noticeList:[]
				}
				getData(i,1);
			}
			
			function getData(type,pageNum){
				uni.request({
					url:`${global.BASE_URL}/notice/catch/${type}/${pageNum}`,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code){
							data.notice.noticeList = res.data.data.list;
							data.notice.total = res.data.data.size;
							if(data.notice.total == res.data.data.total) data.notice.isAll = true
							data.notice.pageNum++;
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
			
			function goSearch(){
				uni.navigateTo({
					url:'/pages/index/index-search?type='+1
				})
			}
			
			function goDetail(url){
				uni.navigateTo({
					url:"/pages/notice/notice-detail?noticeUrl="+url
				})
			}
			
			function addToCalendar(index){
				console.log("加入系统日历")
				uni.showToast({
					icon:'error',
					title:'功能暂未开放'
				})
				// uni.navigateTo({
				// 	url:'/pages/notice/notice-calendar?noticeInfo='+encodeURIComponent(JSON.stringify(data.notice.noticeList[index]))
				// })
			}
			
			return {
				data,
				bodyHeight,
				goSearch,
				addToCalendar,
				changeIndex,
				goDetail
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice-part-search-container{
		height: 80rpx;
		line-height: 80rpx;
		width: 650rpx;
		padding: 0 20rpx;
		margin: 10rpx 30rpx;
		border-radius: 100rpx;
		background-color: #cdcdcd;
		color: #515151;
		text-align: center;
		background: url('../../static/fruit/search.png') no-repeat ;
		background-position: 10px;
		background-size: 60rpx 60rpx;
		background-color: #cdcdcd;
	}
	
	.notice-part-container{
		width: 750rpx;
		display: flex;
		border-top: 3rpx solid #888888;
		// background-color: aqua;
		
		& .notice-part-left{
			width: 220rpx;
			border-right: 3rpx solid #888888;
			overflow: scroll;
			
			& .notice-part-left-item{
				width: 180rpx;
				margin: 20rpx 20rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				color: #515151;
				border: 4rpx solid #515151;
				text-align: center;
				font-size: 28rpx;
			}
			
			& .notice-part-left-item-active{
				color: white;
				background-color: #9BCDD2;
				border: 4rpx solid #9BCDD2;
				text-align: center;
			}
			
		}
		
		& .notice-part-right{
			width: 530rpx;
			
			& .notice-part-right-bottom-mention{
				width: 530rpx;
				text-align: center;
				font-size: 30rpx;
				margin-top: 20rpx;
				font-weight: bold;
			}
			
			& .notice-part-right-item-container{
				
				& .notice-part-right-item{
					width: 460rpx;
					margin: 15rpx 20rpx;
					padding: 10rpx 15rpx;
					border-bottom: 2rpx solid #515151;
					position: relative;
					display: flex;
					display:-webkit-flex;
					align-items:stretch;
					
					& .notice-part-add-calendar{
						width: 60rpx;
						height: inherit;
						padding: 5rpx 5rpx;
						line-height: 40rpx;
						font-size: 27rpx;
						border-radius: 10rpx;
						color: white;
						background-color: #9BCDD2;
						text-align: center;
						display: -webkit-flex;
					}
					
					& .notice-part-right-item-title{
						line-height: 44rpx;
						font-size: 36rpx;
						font-weight: bold;
						word-wrap: break-word;
					}
					
					& .notice-part-right-item-label-container{
						display: flex;
						
						
						& .notice-part-right-item-label{
							padding: 5rpx 8rpx;
							border-radius: 10rpx;
							margin: 10rpx 5rpx 0 5rpx;
							background-color: #9BCDD2;
							color: white;
							font-size: 27rpx;
						}
						
					}
					
					& .notice-part-right-publisher-posttime{
						display: flex;
						
						
						& .notice-part-right-item-publisher{
							margin-top: 10rpx;
							font-size: 27rpx;
							height: 30rpx;
							line-height: 30rpx;
							color: #515151;
						}
						
						& .notice-part-right-item-posttime{
							margin-top: 10rpx;
							font-size: 27rpx;
							height: 30rpx;
							line-height: 30rpx;
							color: #515151;
							margin-left: 20rpx;
						}
						
					}
					
					& .notice-part-right-item-deadline{
						margin-top: 10rpx;
						font-size: 27rpx;
						height: 30rpx;
						line-height: 30rpx;
						color: #515151;
						margin-left:-10rpx;
					}
					
					
					
				}
			}
		}
		
	}
	
	.red{
		color: #DE6868 !important;
	}
</style>
